<template>
  <view>
    <view class="box bd">
      <view style="width: 750rpx; position: fixed; z-index: 999">
        <!-- 				<u-tabs-swiper activeColor="#18C7E2" inactive-color="#717171" ref="tabs" height="120" bar-width="100"
					bar-height="0" :list="navList" :current="current" @change="change" :is-scroll=isScroll
					swiperWidth="750" font-size="32" class="bd"></u-tabs-swiper> -->
        <u-tabs
          activeColor="#18C7E2"
          :list="navList"
          :is-scroll="true"
          :item-width="260"
          bar-height="0"
          font-size="32"
          :current="current"
          @change="change"
          class="bd"
        ></u-tabs>
      </view>
      <swiper
        class="swiper-box"
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
        disable-touch="true"
      >
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%; width: 100%">
            <reminder
              planType="4"
              v-if="showTip"
              v-bind:message="infomate"
            ></reminder>

            <view
              class="item bd1"
              v-for="(v, index) in list"
              :key="v.id"
              @tap="goDetail(v)"
              v-show="!showTip"
            >
              <view class="flex flex-j-b">
                <view
                  class="t1"
                  style="font-size: 34upx; font-weight: 900; color: #444"
                  >{{ v.planName }}
                </view>
                <view class="uni-item-line t1" style="padding: 0 20upx 0">{{
                  v.planTime
                }}</view>
                <u-icon name="arrow-right" color="#cccbcb" size="28"></u-icon>
                <!-- <view class="flex>
								<view>
									<u-tag text="未完成" v-show="v.checkType==0||v.checkType==1"
										border-color="#F68E3A" type="error" 
										style="background-color: #F68E3A;color: #fff;margin-right: 20upx;" />
									<u-tag text="已完成" v-show="v.checkType==2"
										border-color="#18C7E1" type="error" 
										style="background-color: #18C7E1;color: #fff;margin-right: 20upx;" />
								</view>
								<view>
									<u-tag text="未上传" v-show="v.isUpload!=1"
										border-color="#F68E3A" type="error"
										style="background-color: #F68E3A;color: #fff;margin-right: 20upx;" />
									<u-tag text="已上传" v-show="v.isUpload==1"
										border-color="#18C7E1" type="error" 
										style="background-color: #18C7E1;color: #fff;margin-right: 20upx;" />
								</view>
								<view class="iconfont iconarrow-right" style="font-size: 40upx;color: #C3C3C3;"></view>
							</view> -->
              </view>
              <!-- <view class="uni-item-line" style="padding: 20upx 0;">{{v.planTime}}</view> -->
              <view
                class="flex flex-al-c"
                style="padding: 30upx 0 0; color: black"
              >
                <view v-html="v.planGoal"> {{ v.planGoal }}</view>
              </view>
            </view>
            <view
              v-show="!showTip"
              style="
                font-size: 38rpx;
                text-align: center;
                line-height: 10vh;
                height: 10vh;
              "
              class="t1"
            >
              您还未预约，请先去<span
                style="color: #007aff !important; cursor: pointer"
                @click="goyuyue()"
                >预约</span
              ></view
            >
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-x style="height: 100%; width: 100%">
            <reminder
              planType="12"
              v-if="showTipDoor"
              v-bind:message="infomate"
            ></reminder>
            <view
              v-show="!showTipDoor"
              style="
                font-size: 38rpx;
                text-align: center;
                line-height: 70vh;
                height: 100vh;
              "
              class="t1"
            >
              您还未预约，请先去<span
                style="color: #007aff !important; cursor: pointer"
                @click="goyuyue()"
                >预约</span
              ></view
            >
          </scroll-view>
        </swiper-item>
        <swiper-item
          class="swiper-item"
          v-for="(item, idx) in navList.slice(2, navList.length)"
        >
          <scroll-view scroll-x style="height: 100%; width: 100%">
            <reminder
              :deptId="item.deptId"
              :deptName="item.name"
              v-if="showTipDoor1 && item.deptId == hasDeptId"
            ></reminder>
            <view
              v-else
              style="
                font-size: 38rpx;
                text-align: center;
                line-height: 70vh;
                height: 100vh;
              "
              class="t1"
            >
              您还未预约，请先去<span
                style="color: #007aff !important; cursor: pointer"
                @click="goyuyue()"
                >预约</span
              ></view
            >
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import reminder from "@/components/reminder.vue";
export default {
  components: {
    reminder,
  },
  onBackPress(e) {
    uni.switchTab({
      url: "/pages/home/home",
    });
    return true;
  },
  data() {
    return {
      tag1: "../../../static/img/65ff008b0ea040578f44d897bb1ce281.jpg", // 已完成
      tag2: "../../../static/img/37233eda18584b35a8ba7bb11381d5ab.jpg", // 未完成
      navList: [
        {
          name: "产检预约",
        },
        {
          name: "门诊预约",
        },
      ],
      current: 0,
      swiperCurrent: 0,
      list: [],
      showTip: false,
      showTipDoor: false,
      showTipDoor1: false, //动态科室卡片
      isScroll: false,
      infomate: {
        id: "",
        isabs: "",
        name: "",
      },
      carshow: "", //判断动态的科室是否显示
      hasDeptId: "", //有预约卡片的id
    };
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    //获得最早预约但未取消的信息 跳转卡片
    getYyKs() {
      this.config
        .get("/subscribesInfos/getUserSubscribeInfo", {})
        .then((res) => {
          if (res.data.data) {
            if (res.data.data.flag == 1) {
              this.dtname = 0;
              this.dtype = res.data.data.type;
            } else {
              this.dtname = res.data.data.type;
              this.dtype = 0;
              const ksName = res.data.data.type;
              const newIndex = this.navList.findIndex((a) => a.name == ksName);
              if (newIndex != -1) {
                console.log(newIndex);
                this.getCard(this.navList[newIndex].deptId);
              }
            }
            setTimeout((s) => {
              this.getKsIndex(this.dtname, this.dtype);
            }, 800);
          }
        });
    },
    //夜间模式
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    // tab栏切换
    change(index) {
      if (index == 0) {
        this.current = index;
        this.swiperCurrent = index;
        this.getPrenatal(); //孕妇待办
      } else if (index == 1) {
        this.current = index;
        this.swiperCurrent = index;
        this.getDoor(); //门诊预约
      } else {
        this.current = index;
        this.swiperCurrent = index;
        this.getCard(this.navList[index].deptId);
      }
    },
    transition({ detail: { dx } }) {
      // this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      // this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    //获得新卡片
    getCard(id) {
      let self = this;
      this.config
        .get("/getSysDept/getCardSubscribe", {
          deptId: id || "",
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            if (res.data.data.checkType == "1") {
              self.showTipDoor1 = true;
              self.hasDeptId = res.data.data.deptId;
            }
            if (
              res.data.data.checkType == "2" &&
              res.data.data.checkType == "0"
            ) {
              self.showTipDoor1 = false;
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    //去预约
    goyuyue() {
      uni.navigateTo({
        url: "./app-inspection",
      });
    },
    // 孕妇待办
    getPrenatal() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/agency/planGravidPrenatalCheck/getPlanGravidPrenatalCheck", {})
        .then((res) => {
          uni.hideLoading();
          console.log(res);
          if (res.data.code === 200) {
            self.list = res.data.data;
            if (self.list[0].checkType == "1") {
              self.showTip = true;
            }
            if (self.list[0].checkType == "2") {
              self.showTip = false;
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    //门诊预约
    getDoor() {
      let self = this;
      this.config.get("/anency/outpatient/getOutpatient", {}).then((res) => {
        // console.log(res)
        if (res.data.code === 200) {
          if (res.data.data.checkType == "1") {
            self.showTipDoor = true;
          }
          if (
            res.data.data.checkType == "2" &&
            res.data.data.checkType == "0"
          ) {
            self.showTipDoor = false;
          }
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    //去详情页面
    goDetail(v) {
      uni.navigateTo({
        url:
          "/pages/main/pregnant/inspection-plan-detail?id=" +
          v.id +
          "&type=Upcoming",
      });
    },
    getPlanss() {
      uni.redirectTo({
        url: "/pages/main/pregnant/backlog",
      });
    },
    //获取动态科室
    getAnyId() {
      this.config.get("/getSysDept/getOther", {}).then((res) => {
        console.log(res);
        for (let i = 0; i < res.data.data.length; i++) {
          if (
            res.data.data[i].population == 0 ||
            res.data.data[i].population == 2
          ) {
            let datas = {
              name: res.data.data[i].deptName,
              deptId: res.data.data[i].deptId,
            };
            this.navList.push(datas);
          }
        }
        setTimeout((s) => {
          this.getKsIndex(this.dtname, this.dtype);
        }, 1000);
      });
    },
    //动态tab
    getKsIndex(name, type) {
      if (type == 4) {
        this.change(0); //tab栏
        this.getPrenatal(); //孕妇待办
      } else if (type == 12) {
        this.change(1); //tab栏
        this.getDoor(); //门诊预约
      } else {
        const ksName = name;
        const newIndex = this.navList.findIndex((a) => a.name == ksName);
        if (newIndex != -1) {
          console.log(newIndex);
          this.getCard(this.navList[newIndex].deptId);
          this.change(newIndex); //4
        }
      }
    },
  },
  onLoad(option) {
    this.dtname = option.name;
    this.dtype = option.type;
    console.log(Boolean(JSON.stringify(option) === "{}"));
    this.infomate.name = option.name;
    this.getAnyId(); //获取动态科室
    this.getPrenatal(); //孕妇待办
    // this.getDoor()
    if (JSON.stringify(option) == "{}") {
      this.getYyKs(); //获得最早预约但未取消的信息
    } else {
      this.getKsIndex(this.dtname, this.dtype); //动态跳转tab
    }
  },
  onShow() {
    this.getDoor();
  },
};
</script>

<style lang="less" scoped>
page {
  background-color: #efefef;
}

.box {
  overflow: hidden;
}

.swiper-box {
  margin-top: 120rpx;
  flex: 1;
}

uni-swiper {
  height: 100vh;
}

.swiper-item {
  height: 100%;
}

.flex-j-b {
  padding: 4rpx;
  border-bottom: 1px solid #ececec;
}

.uni-item-line::after {
  height: 0px !important;
}

.item {
  margin: 20upx;
  padding: 30upx;
  background-color: #ffffff;
  border-radius: 14rpx;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }

  .bd1 {
    background-color: #38383c !important;
  }

  .t1 {
    color: #ccc !important;
  }

  >>> span {
    color: #ccc !important;
  }
}
</style>
